<template>
  <!--通用弹窗-->
  <BasicModal v-bind="$attrs" @register="register" :title="modalTitle" :width="800" @ok="handleOk" :destroyOnClose="true" :canFullscreen="true">
    <div class="form-section">
      <a-form ref="formRef" :model="formState">
        <a-form-item label="组织部门" name="orgName" :rules="rules.orgName">
          <a-input v-model:value="formState.orgName" :disabled="true" />
        </a-form-item>
        <a-form-item label="部门编码" name="orgCode" :rules="rules.orgCode">
          <a-input v-model:value="formState.orgCode" :disabled="true" />
        </a-form-item>
        <a-form-item label="上级部门" name="parentOrgName" :rules="rules.parentOrgName">
          <a-input v-model:value="formState.parentOrgName" :disabled="true" />
        </a-form-item>
        <a-form-item label="组织类型" name="orgType" :rules="rules.orgType">
          <a-select v-model:value="formState.orgType" :options="orgTypeList" :fieldNames="{ label: 'text', value: 'value' }" />
        </a-form-item>
        <a-form-item label="绩效员" name="pluraCode" :rules="rules.pluraCode">
          <a-select
            v-model:value="formState.pluraCode"
            style="width: 100%"
            placeholder="请选择"
            :open="false"
            :disabled="disabled"
            allow-clear
            :fieldNames="{ label: 'pluraName', value: 'pluraCode' }"
            :options="formState.pluraOptions"
            @click="showChooseModal(formState, formState.pluraCode, 'plura', true)"
          />
        </a-form-item>
        <a-form-item label="部门负责人" name="psnCode" :rules="rules.psnCode">
          <a-select
            v-model:value="formState.psnCode"
            style="width: 100%"
            placeholder="请选择"
            :open="false"
            allow-clear
            :fieldNames="{ label: 'pluraName', value: 'pluraCode' }"
            :options="formState.psnOptions"
            @click="showChooseModal(formState, formState.psnCode, 'psnNum', true)"
          />
        </a-form-item>
        <a-form-item label="分管领导" name="epmPerson1Code" :rules="rules.epmPerson1Code">
          <a-select
            v-model:value="formState.epmPerson1Code"
            style="width: 100%"
            placeholder="请选择"
            :open="false"
            :disabled="disabled"
            allow-clear
            mode="multiple"
            :fieldNames="{ label: 'pluraName', value: 'pluraCode' }"
            :options="formState.epmPerson1Options"
            @click="showChooseModal(formState, formState.epmPerson1Code, 'epmPerson1', false)"
          />
        </a-form-item>
        <a-form-item label="主要领导" name="epmPerson2Code" :rules="rules.epmPerson2Code">
          <a-select
            v-model:value="formState.epmPerson2Code"
            style="width: 100%"
            placeholder="请选择"
            :open="false"
            :disabled="disabled"
            allow-clear
            mode="multiple"
            :fieldNames="{ label: 'pluraName', value: 'pluraCode' }"
            :options="formState.epmPerson2Options"
            @click="showChooseModal(formState, formState.epmPerson2Code, 'epmPerson2', false)"
          />
        </a-form-item>
        <a-form-item label="其它分管领导" name="epmPerson3Code" :rules="rules.epmPerson3Code">
          <a-select
            v-model:value="formState.epmPerson3Code"
            style="width: 100%"
            placeholder="请选择"
            :open="false"
            :disabled="disabled"
            allow-clear
            mode="multiple"
            :fieldNames="{ label: 'pluraName', value: 'pluraCode' }"
            :options="formState.epmPerson3Options"
            @click="showChooseModal(formState, formState.epmPerson3Code, 'epmPerson3', false)"
          />
        </a-form-item>
        <a-form-item label="是否考核" name="assess" :rules="rules.assess">
          <a-switch v-model:checked="formState.assess" checkedValue="true" unCheckedValue="false" />
        </a-form-item>
        <a-form-item label="是否集约化" name="isIntensification" :rules="rules.isIntensification">
          <a-switch v-model:checked="formState.isIntensification" checkedValue="true" unCheckedValue="false" />
        </a-form-item>
      </a-form>
    </div>
  </BasicModal>
  <person-modal @register="registerPersonModal" @success="handlePersonSuccess" />
</template>

<script setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useModal } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { ref, unref } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { initDictOptions } from '../../../components/utils/index';
  import { updateUnit } from './service';
  import { editForm } from './assessDepartment.data';
  import PersonModal from './PersonModal.vue';

  const { createMessage: msg } = useMessage();
  //批量编辑选人弹框
  const [registerPersonModal, { openModal: openPersonModal = () => {} }] = useModal();
  const emit = defineEmits(['success', 'register']);
  const currentRecord = ref({});
  const personType = ref('');
  const orgTypeList = ref([]);
  orgTypeList.value = initDictOptions('hub_org_type');
  console.log('111', orgTypeList.value);
  const formState = ref({
    assess: 'false',
    isIntensification: 'false',
  });
  const rules = {
    pass: [{ required: true, message: 'Please input your username!', trigger: 'change' }],
  };
  let modalTitle = ref('编辑');
  // @ts-ignore 提取表单参数

  //注册弹窗对象 挂载关闭弹窗方法
  // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
  const [register, { closeModal = () => {}, setModalProps = (p) => {} }] = useModalInner(async (data) => {
    console.log('data', data);
    formState.value = { ...unref(data.record) };
  });
  //选人弹框
  function showChooseModal(record, list, type, isOnly) {
    currentRecord.value = record;
    personType.value = type;
    openPersonModal(true, { list, isOnly });
  }
  //选人确定回调
  function handlePersonSuccess(data) {
    console.log('选人确定回调', data);
    switch (personType.value) {
      case 'plura':
        currentRecord.value.pluraCode = data.checkedKeys.value;
        currentRecord.value.pluraOptions = [data.recordRows.value];
        currentRecord.value.pluraList = data.checkedKeys.value.toString();
        currentRecord.value.pluraNameList = data.recordRows.value.pluraNameList;
        break;
      case 'psnNum':
        currentRecord.value.psnCode = data.checkedKeys.value;
        currentRecord.value.psnOptions = [data.recordRows.value];
        currentRecord.value.psnNum = data.checkedKeys.value.toString();
        currentRecord.value.psnName = data.recordRows.value.pluraName;
        break;
      default:
        currentRecord.value[personType.value + 'Code'] = data.checkedKeys.value;
        currentRecord.value[personType.value + 'Options'] = data.recordRows.value;
        // currentRecord.value[personType.value + 'NameList'] = data.recordRows.value
        currentRecord.value[personType.value] = data.checkedKeys.value.toString();
        break;
    }
  }
  const handleOk = () => {
    if (!formState.value.pluraCode || formState.value.pluraCode?.length == 0) {
      formState.value.pluraList = '';
      formState.value.pluraNameList = '';
    }
    if (!formState.value.psnCode || formState.value.psnCode?.length == 0) {
      formState.value.psnNum = '';
      formState.value.psnName = '';
    }
    if (!formState.value.epmPerson1Code || formState.value.epmPerson1Code?.length == 0) {
      formState.value.epmPerson1 = '';
      formState.value.epmPerson1Name = '';
    }
    if (!formState.value.epmPerson2Code || formState.value.epmPerson2Code?.length == 0) {
      formState.value.epmPerson2 = '';
      formState.value.epmPerson2Name = '';
    }
    if (!formState.value.epmPerson3Code || formState.value.epmPerson3Code?.length == 0) {
      formState.value.epmPerson3 = '';
      formState.value.epmPerson3Name = '';
    }
    delete formState.value.psnOptions;
    delete formState.value.pluraOptions;
    delete formState.value.epmPerson1Options;
    delete formState.value.epmPerson2Options;
    delete formState.value.epmPerson3Options;
    updateUnit({ ...unref(formState.value) }).then((res) => {
      closeModal();
      emit('success');
    });
  };
</script>

<style lang="less" scoped>
  /deep/.ant-select-selection-item-remove {
    display: none !important;
  }
  // .performanceForm {
  //   .ant-input-number {
  //     width: 100%;
  //   }
  //   .ant-picker {
  //     width: 50%;
  //   }
  //   /deep/.ant-select-selection-item-remove {
  //     display: none !important;
  //   }
  // }
  .form-section {
    /deep/.ant-form {
      width: 70%;
    }
    /deep/.ant-form-item-label {
      width: 30%;
    }
  }
  .title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #5c5b5b;
  }
</style>
